<html>
  <head>
    <title>zuck.js</title>

    <link rel="icon" href="ICON.png" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0"
    />

    <!-- demo styles -->
    <link rel="stylesheet" href="demo/style.css" />

    <!-- lib styles -->
    <link rel="stylesheet" href="dist/zuck.css" />

    <!-- lib skins -->
    <link rel="stylesheet" href="dist/skins/snapgram.css" />
    <link rel="stylesheet" href="dist/skins/vemdezap.css" />
    <link rel="stylesheet" href="dist/skins/facesnap.css" />
    <link rel="stylesheet" href="dist/skins/snapssenger.css" />
  </head>
  <body>
    <div id="root"></div>

    <!-- Too much time needed to setup webpack and blablabla -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

    <script src="dist/zuck.js"></script>
    <script src="demo/script.js"></script>

    <script type="text/babel">
      class Demo extends React.Component {
        render() {
          return (
            <div>
              <h1 id="header">&nbsp;</h1>

              <a
                href="https://ramon.codes/projects/zuck.js"
                target="_blank"
                className="disclaimer"
              >
                <img src="ICON.png" alt="zuck.js logo" />

                <p>
                  This a demonstration of <strong>zuck.js</strong> javascript
                  library.
                </p>
                <p>
                  Not associated with Facebook, Instagram, WhatsApp or Snapchat.
                </p>
              </a>

              <Stories />

              <div className="skin">
                Choose your theme:{' '}
                <select
                  id="skin"
                  onChange={(event) => changeSkin(event.target.value)}
                >
                  <option value="Snapgram">
                    Snapgram (without fullscreen)
                  </option>
                  <option value="FaceSnap">FaceSnap (with fullscreen)</option>
                  <option value="VemDeZAP">VemDeZAP (timeline + arrows)</option>
                  <option value="Snapssenger">
                    Snapssenger (with previews)
                  </option>
                </select>
              </div>
            </div>
          );
        }
      }
    </script>

    <script type="text/babel">
      class Stories extends React.Component {
        constructor(props) {
          super(props);

          // React ^16.3
          // this.storiesElement = React.createRef();

          this.storiesElement = null;
          this.storiesApi = null;

          this.state = {
            stories: [
              {
                id: 'ramon',
                photo:
                  'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/1.jpg',
                name: 'Ramon',
                time: timestamp(),
                items: [
                  {
                    id: 'ramon-1',
                    type: 'photo',
                    length: 3,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/1.jpg',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/1.jpg',
                    link: '',
                    linkText: false,
                    time: timestamp()
                  },
                  {
                    id: 'ramon-2',
                    type: 'video',
                    length: 0,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/2.mp4',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/2.jpg',
                    link: '',
                    linkText: false,
                    time: timestamp()
                  },
                  {
                    id: 'ramon-3',
                    type: 'photo',
                    length: 3,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/3.png',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/3.png',
                    link: 'https://ramon.codes',
                    linkText: 'Visit my Portfolio',
                    time: timestamp()
                  }
                ]
              },
              {
                id: 'gorillaz',
                photo:
                  'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/2.jpg',
                name: 'Gorillaz',
                time: timestamp(),
                items: [
                  {
                    id: 'gorillaz-1',
                    type: 'video',
                    length: 0,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/4.mp4',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/4.jpg',
                    link: '',
                    linkText: false,
                    time: timestamp()
                  },
                  {
                    id: 'gorillaz-2',
                    type: 'photo',
                    length: 3,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/5.jpg',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/5.jpg',
                    link: '',
                    linkText: false,
                    time: timestamp()
                  }
                ]
              },
              {
                id: 'ladygaga',
                photo:
                  'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/3.jpg',
                name: 'Lady Gaga',
                time: timestamp(),
                items: [
                  {
                    id: 'ladygaga-1',
                    type: 'photo',
                    length: 5,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/6.jpg',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/6.jpg',
                    link: '',
                    linkText: false,
                    time: timestamp()
                  },
                  {
                    id: 'ladygaga-2',
                    type: 'photo',
                    length: 3,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/7.jpg',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/7.jpg',
                    link: 'http://ladygaga.com',
                    linkText: false,
                    time: timestamp()
                  }
                ]
              },
              {
                id: 'starboy',
                photo:
                  'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/4.jpg',
                name: 'The Weeknd',
                time: timestamp(),
                items: [
                  {
                    id: 'starboy-1',
                    type: 'photo',
                    length: 5,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/8.jpg',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/8.jpg',
                    link: '',
                    linkText: false,
                    time: timestamp()
                  }
                ]
              },
              {
                id: 'riversquomo',
                photo:
                  'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/5.jpg',
                name: 'Rivers Cuomo',
                time: timestamp(),
                items: [
                  {
                    id: 'riverscuomo-1',
                    type: 'photo',
                    length: 10,
                    src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/9.jpg',
                    preview:
                      'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/9.jpg',
                    link: '',
                    linkText: false,
                    time: timestamp()
                  }
                ]
              }
            ]
          };
        }

        componentDidMount() {
          let currentSkin = getCurrentSkin(); // from demo

          this.storiesApi = Zuck(this.storiesElement, {
            backNative: true,
            previousTap: true,
            skin: currentSkin['name'],
            autoFullScreen: currentSkin['params']['autoFullScreen'],
            avatars: currentSkin['params']['avatars'],
            paginationArrows: currentSkin['params']['paginationArrows'],
            list: currentSkin['params']['list'],
            cubeEffect: currentSkin['params']['cubeEffect'],
            localStorage: true,
            stories: this.state.stories,
            reactive: true,
            callbacks: {
              onDataUpdate: function (currentState, callback) {
                this.setState(
                  (state) => {
                    state.stories = [...currentState];

                    return state;
                  },
                  () => {
                    callback();
                  }
                );
              }.bind(this)
            }
          });
        }

        render() {
          const timelineItems = [];

          this.state.stories.forEach((story, storyId) => {
            const storyItems = [];

            story.items.forEach((storyItem) => {
              storyItems.push(
                <li
                  key={storyItem.id}
                  data-id={storyItem.id}
                  data-time={storyItem.time}
                  className={storyItem.seen ? 'seen' : ''}
                >
                  <a
                    href={storyItem.src}
                    data-type={storyItem.type}
                    data-length={storyItem.length}
                    data-link={storyItem.link}
                    data-linkText={storyItem.linkText}
                  >
                    <img src={storyItem.preview} />
                  </a>
                </li>
              );
            });

            let arrayFunc = story.seen ? 'push' : 'unshift';
            timelineItems[arrayFunc](
              <div
                className={story.seen ? 'story seen' : 'story'}
                key={story.id}
                data-id={story.id}
                data-last-updated={story.lastUpdated}
                data-photo={story.photo}
              >
                <a className="item-link" href={story.link}>
                  <span className="item-preview">
                    <img src={story.photo} />
                  </span>
                  <span
                    className="info"
                    itemProp="author"
                    itemScope=""
                    itemType="http://schema.org/Person"
                  >
                    <strong className="name" itemProp="name">
                      {story.name}
                    </strong>
                    <span className="time">
                      {(new Date(story.lastUpdated * 1000).toLocaleString())}
                    </span>
                  </span>
                </a>

                <ul className="items">{storyItems}</ul>
              </div>
            );
          });

          return (
            <div>
              <div
                ref={(node) => (this.storiesElement = node)}
                id="stories-react"
                className="storiesWrapper"
              >
                {timelineItems}
              </div>
            </div>
          );
        }
      }
    </script>

    <script type="text/babel">
      ReactDOM.render(<Demo />, document.getElementById('root'));
    </script>
  </body>
</html>
